<template>
  <div class="recommendedMV">
    <!-- 渲染视频, 以及视频介绍 -->
    <lazy-component>
    <ul v-for="(item, index) in mvData" :key="index" class="ulOutBox">
      <li class="videoOutBox">
        <video
          :src="item.playUrl"
          controls
          class="videoStyle"
          :poster="item.cover"
          ref="videoDom"
        ></video>
      </li>
      <!-- 播放按钮 -->
      <van-icon
        v-show="!item.isPlay"
        name="play-circle-o"
        class="playBtn"
        @click="getId2(item.id, index)"
        ref="iconPlay"
      />
      <!-- mv简介 -->
      <li class="videoText">{{ item.name }}</li>
      <li class="playCount" ref="iconCount">
        <!-- 播放数量 -->
        <van-icon name="play-circle-o" class="iconPlay" />&nbsp;{{
          changeUnit(item.playCount)
        }}
      </li>
      <!-- 点赞评论,艺人头像 -->
      <li class="commentList">
        <img :src="item.cover" alt="" class="headPortrait" />
        <span class="artistName">{{ item.artistName }}</span>
        <!-- 问题!!! 设置点击的赞切换样式 -->

   <van-icon name="good-job-o" v-if="isIndex===index" class="goodJob animate__slideOutUp animate__animated" @click="changeColor(index)"/>
        <van-icon name="good-job-o" :class="isIndex==index?'goodJobColor':'goodJob'" @click="changeColor(index)"/>
        <router-link :to="{ path: '/CommentDetail', query: { id: item.id,index:index } }"
          ><van-icon name="ellipsis" class="levingMessage"
        /></router-link>
      </li>
         <div class="greyLine"></div>
    </ul>
    </lazy-component>
  </div>
</template>
<script>

import { getNewMv } from "../../../api/vudeo.api.js";
import { getMv } from "../../../api/vudeo.api.js";

getMv;
export default {
  name: "NewMv",
  data() {
    return {
      mvData: null,
      mvId: null,
      mvCdn: null,
      commentCount: null,
      isSwich:true,
      isIndex:null,
    };
  },
  created() {
    //   请求mvId
    getNewMv(50).then((res) => {
      if (res.code === 200) {
        this.mvData = [];
        res.data.forEach((item) => {
          item = {
            ...item,
            playUrl: null, //播放地址
            isplay: false,
          };
          this.mvData.push(item);
        });
      }
    });
  },
  methods: {
    //   封装播放数量
    changeUnit(num) {
      if (num.toString().length > 8) {
        return (num / 1e9).toFixed(1) + "亿";
      } else if (num.toString().length > 4) {
        return (num / 1e4).toFixed(1) + "万";
      }else{
        return num
      }
    },
    // 点击自动播放, 失败 后期做调整
    change() {
      this.$refs.videoDom.autoplay;
    },
    // 获取每个列的id
    getId2(data, index) {
      this.$refs.videoDom.forEach((item, i) => {
        if (i !== index) {
          item.pause();
        } else {
          item.play();
        }
      });
      getMv(data).then(res => {    
        this.mvData.forEach((item) => {
          if (item.id === data) {
            item.playUrl = res.data.url;
            item.isPlay = true;
          } else {
            item.playUrl = null;
            item.isPlay = false;
          }
        });
      });
    },
    changeColor(data){
      this.isIndex=data
      this.isSwich=!this.isSwich
    }
  },
};
</script>
<style lang="less" scoped >
.ulOutBox {
  position: relative;
  padding-top: 20px;
}
.videoStyle {
  border-radius: 10px;
  width: 100%;
    height: 220px;
    // border: 1px solid red;
}
.videoOutBox {
  display: flex;
  padding: 0 10px;
}
.videoText {
  font-size: 14px;
  display: flex;
  padding: 12px 17px;
  padding-bottom: 5px;
}
.playCount {
  position: absolute;
  top: 40px;
  left: 20px;
  color: white;
  font-size: 12px;
  line-height: 12px;
  display: flex;
  align-items: center;
}
.iconPlay {
  padding-right: 3px;
}
.playBtn {
  position: absolute;
  top: 33%;
  left: 43%;
  font-size: 50px;
  color: transparent;
  z-index: 2;
}
.headPortrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.commentList {
  display: flex;
  font-size: 25px;
  align-items: center;
  position: relative;
  padding: 0 10px;
  border-top: 0.5px solid rgb(226, 223, 223);
  padding-top: 5px;
}
.artistName {
  font-size: 14px;
  padding-left: 8px;
}
.goodJob {
  position: absolute;
  top: 26%;
  right: 30%;
}
.goodJobColor {
  position: absolute;
  top: 26%;
  right: 30%;
  color: red;
}
.levingMessage {
  position: absolute;
  top: 28%;
  right: 15%;
}
.greyLine{
  margin-top: 5px;
  height: 8px;
  background-color:#eeecec;
}
</style>